<script setup lang="ts">
import { onMounted, reactive, watch } from "vue";
import TitleVue from '@/components/Title.vue';
import ButtonVue from '@/components/More.vue';
import ZanVue from '@/components/icon/Zan.vue';
import ShareVue from '@/components/icon/ShareIcon.vue';
import NewsVue from '../home/components/News.vue';
import shareDom from '@/components/share.vue';
import PlayerVue from './components/Player.vue';
import { getVideo, getdetail, getNews } from '@/api'
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const router = useRouter()

const state = reactive({
  info: {} as Record<string, any>,
  videos: [] as any,
  news: {} as Record<string, any>,
  show: false,
  config: {
    title: '',
    pic: '',
    content: ''
  }
})
const changeStatus = () => {
  state.show = !state.show
}
const handleChange = () => {
  state.show = false
}
const handlePath = (id: string) => {
  router.push(`/video?id=${id}`)
  getData(id)
}
const getData = (id: string) => {
  getdetail(id).then((res: any) => {
    if (res.title) {
      document.title = res.title
    }
    state.info = res
    state.config.title = res.title
    state.config.content = res.introduce
    state.config.pic = res.cover_url
  })
}
watch(() => route.query.id, (val) => {
  state.info = {}
  if (route.path === '/video') {
    let id = route.query.id + "";
    getData(id);
  }
})
onMounted(() => {
  const id = route.query.id + ''
  getData(id)
  getVideo().then((res: any) => {
    state.videos = res
  })
  getNews().then((res: any) => {
    state.news = res
  })
})

</script>

<template>
  <div class="container">
    <div class="player-wrapper flex">
      <div class="left">
        <PlayerVue :src="state.info.content_url" :cover="state.info.cover_url"></PlayerVue>
      </div>
      <div class="right">
        <div class="text-black font-lg flex align-center">
          <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30"
            height="30">
            <path
              d="M515.057 32c-269.045 0-483.057 214.012-483.057 483.057 0 262.93 214.013 476.943 483.057 476.943 262.93 0 476.943-214.013 476.943-476.943 0-269.045-214.012-483.057-476.943-483.057v0zM515.057 80.917c238.471 0 434.14 189.554 434.14 434.14 0 238.471-195.668 434.14-434.14 434.14-244.586 0-434.14-195.668-434.14-434.14 0-244.586 189.554-434.14 434.14-434.14zM447.796 264.357l311.847 189.554c55.032 30.573 48.917 85.605 0 116.179v0l-311.847 189.554c-24.458 12.23-55.032 24.458-85.605 6.114-18.344-12.23-24.458-36.688-24.458-61.147v-385.222c0-24.458 6.114-48.917 24.458-61.147 30.573-18.344 61.147-6.114 85.605 6.114z"
              fill="#E10000"></path>
          </svg>
          <span style="margin-left: 15px;">观看热榜</span>
        </div>
        <div class="hot-list mt-4">
          <div class="hot-list-item" v-for="item in state.videos" :key="item.id" @click="handlePath(item.id)">
            <div class="img-wrap cp">
              <img :src="item.cover_url" :alt="item.title">
              <div class="tips">{{ item.duration }}</div>
            </div>
            <div class="info">
              <div class="line-2 text-body font-md cp">{{ item.title }}</div>
              <div class="text-muted">{{ item.hits }}次播放</div>
            </div>
          </div>
        </div>
        <div class="flex-center" style="margin-top: 65px;">
          <ButtonVue :path="`/project/list?code=classify_2d4c88a`">MORE</ButtonVue>
        </div>
      </div>
    </div>
    <div class="player-info">
      <div class="flex text-body mb-4 font-sm share-box align-center">
        <div class="mr-3 flex-center">
          <ZanVue color="#626675"></ZanVue>
          <span class="ml-1">{{ state.info.hits }}</span>
        </div>
        <div class="flex-center mr-2 cp" @click="changeStatus">
          <ShareVue color="#626675"></ShareVue>
          <span class="ml-1">分享</span>
        </div>
        <shareDom :show="state.show" :config="state.config" @change="handleChange"></shareDom>
      </div>
      <div class="text-black font-lg mb-2">{{ state.info.title }}</div>
      <div class="flex font-sm">
        <div class="flex-center mr-2">
          <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="10"
            height="10">
            <path
              d="M141.064542 1004.146939C71.056379 962.35102 73.146175 974.889796 73.146175 508.865306 73.146175 96.130612 73.146175 85.681633 95.089032 58.514286 140.019644 1.044898 148.378828 0 512.003318 0c370.938776 0 379.297959 1.044898 417.959183 65.828571 19.853061 31.346939 20.897959 55.379592 20.897959 444.081633 0 453.485714 0 453.485714-65.828571 493.191837-31.346939 19.853061-54.334694 20.897959-373.028571 20.897959-312.42449 0-341.681633-2.089796-370.938776-19.853061z m653.061225-163.004082v-26.122449H513.048216c-216.293878 0-282.122449 3.134694-286.302041 13.583674-12.538776 36.571429 0 38.661224 286.302041 38.661224h281.077551v-26.122449z m0-219.428571v-26.122449H513.048216c-216.293878 0-282.122449 3.134694-286.302041 13.583673-12.538776 36.571429 0 38.661224 286.302041 38.661225h281.077551v-26.122449z m0-219.428572v-26.122449H513.048216c-216.293878 0-282.122449 3.134694-286.302041 13.583674-12.538776 36.571429 0 38.661224 286.302041 38.661224h281.077551v-26.122449zM501.554338 182.857143v-26.122449H366.762501c-99.265306 0-136.881633 3.134694-140.016326 13.583673-11.493878 34.481633 4.179592 38.661224 140.016326 38.661225h134.791837v-26.122449z">
            </path>
          </svg><span class="ml-1">简介</span>
        </div>
        <div class="flex-center">
          <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20"
            height="20">
            <path
              d="M710.287 320.707c-87.785 26.446-103.857 101.388-98.198 148.99-62.617-77.737-60.05-167.163-60.05-295.997C351.224 253.674 397.88 484.262 391.9 554.283c-50.513-43.664-60.055-147.987-60.055-147.987-53.328 28.965-80.076 106.364-80.076 169.138 0 151.81 116.513 274.867 260.23 274.867 143.714 0 260.23-123.059 260.23-274.867 0-90.22-62.713-131.85-61.957-254.727h0.015m0 0">
            </path>
          </svg><span class="ml-1">热度 {{ state.info.heat }}</span>
        </div>
        <div class="type ml-5">
          <span v-for="(item, index) in state.info.tag" :key="index">{{ item }}</span>
        </div>
      </div>
      <div class="font-m mt-4 desc" v-html="state.info.about"></div>
    </div>
  </div>
  <TitleVue title="新闻资讯" desc="NEWS"></TitleVue>
  <NewsVue :obj="state.news"></NewsVue>
  <div style="margin-bottom: 75px;"></div>
</template>

<style lang="scss" scoped>
.player-wrapper {
  height: 590px;
  margin-top: 60px;
  margin-bottom: 45px;

  .left {
    width: 1040px;
    height: 590px;
    margin-right: 50px;
    border: 4px solid #000000;
    box-shadow: 0px 15px 55px 15px rgba(98, 102, 117, 0.35);
    border-radius: 12px;
  }

  .right {
    width: 350px;

    .hot-list-item {
      display: flex;

      &:not(:last-child) {
        margin-bottom: 45px;
      }

      .img-wrap {
        position: relative;
        width: 135px;
        height: 100px;
        margin-right: 10px;
        border-radius: 12px;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .tips {
          position: absolute;
          bottom: 7px;
          right: 7px;
          padding: 0 10px;
          line-height: 30px;
          color: #fff;
          background-color: rgba($color: #000000, $alpha: 0.2);
          border-radius: 12px;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}

.player-info {
  width: 1040px;

  .share-box {
    height: 30px;
  }

  .type {
    span {
      padding: 0 8px;
      margin-right: 12px;
      font-size: 12px;
      line-height: 20px;
      color: #fff;
      display: inline-block;
      background-color: #9195A3;
    }
  }

  .desc {
    line-height: 26px;

    p:not(:last-child) {
      margin-bottom: 40px;
    }
  }
}
</style>
